<template>
	<view class="main">
    <view class="notice m-flex-row" :style="[{backgroundColor: bgColor}]" v-if="!$u.test.isEmpty(noticeMessage.noticeMessageContentId)">
      <view class="notice-left">
        <u-icon name="volume" :label="$u.test.isEmpty(noticeMessage.tag) ? '' : noticeMessage.tag" :color="messageColor" size="40rpx" labelSize="28rpx" :labelColor="messageColor"/>
      </view>
      <u-notice-bar :text="noticeMessage.content" icon=" " :bgColor="bgColor" :color="messageColor"/>
    </view>
    <view :class="needMarginBottom ? 'u-m-t-30' : ''" v-if="!$u.test.isEmpty(noticeMessage.noticeMessageContentId)"/>
	</view>
</template>

<script>
	export default {
		name:"notice-bar",
		data() {
			return {
        noticeMessage: {
          tag: '',
          content: '暂无公告',
          noticeMessageTagId: '',
          noticeMessageContentId: '',
        }
			};
		},
    props:{
      merchantStoreId: {
        type: Number,
        value: null
      },
      bgColor: {
        type: String,
        default: 'rgb(217, 226, 255)'
      },
      messageColor: {
        type: String,
        default:'#7E7DF3'
      },
      needMarginBottom: {
        type: Boolean,
        default:true
      },
    },

    watch: {
      merchantStoreId(newVal, oldVal) {
        console.log('最新值是：'+newVal,"原来的值是："+ oldVal);

        if (!this.$u.test.isEmpty(this.merchantStoreId)){
          this.findMerchantStoreById()
        }
      }
    },

    methods: {
      findMerchantStoreById(){
        this.$api("merchantStore.findMerchantStoreById", {id:this.merchantStoreId}).then(res => {
          if (res.status == 0) {
            if (!this.$u.test.isEmpty(res.data)){
              this.noticeMessage = res.data;
            }
          }
        }).catch(err => {

        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.main{
  .notice{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	// margin-bottom: 20rpx;
    .notice-left{
      min-width: 80rpx;
      padding-left: 20rpx;
    }
  }
}

/deep/ .u-notice-bar {
  padding-left: 0rpx !important;
}
</style>
